5
5
.
.
1
1
1
1
.
.
f
f
r
r
a
a
m
m
e
e
I
I
n
n
f
f
o
o
[
[
R
R
]
]
[
[
R
R
]
]
[
[
R
R
]
]
When you apply .frame modifier to a View SwiftUI
● creates a new invisible container View (with the specified size)
● positions the original View inside it (using alignment: .center by default)
With the Frame around the Child View you can now align Text View at different positions around the Screen.
This would not be possible without the Frame View since the Root View does not accept alignment parameters.
Instead it always centers its child.
So in the case of Text View, Frame View is not used to increase the size of the Text View as stated here.
But in the case of Image View this can be so if you apply .resizable modifier to the Image. Then it will fill the Frame size.
This is so because it depends on the child View if it wants to keep its size or expand to the size of the Parent View.
So the confusing part about .frame is that is actually a container View (just like every other Modifier)
● that is applied differently then other container Views (through Modifier and not as a Container View)
● that is declared after the child View (for all other container Views first you declare them and then list their children)
Syntax
.frame(width: 0, minHeight: 0, maxHeight: .infinity, alignment: .bottom)
Parameters
NAME
DESCRIPTION
width
Exact Width
minWidth
Minimum Width that Frame View should take
maxWidth
Maximum Width that Frame View can take
height
Exact Height
minHeight
Minimum Height that Frame View should take
maxHeight
Maximum Height that Frame View can take
alignment
Options are described below
Alignment Options
top
topTrailing
topLeading
center
leading
trailing
bottom
bottomTrailing
bottomLeading
W
W
i
i
t
t
h
h
o
o
u
u
t
t
F
F
r
r
a
a
m
m
e
e
By default Text View is positioned at the center of the Screen taking only as much space as it needs to fit its String.
We have no control over its position.
struct ContentView : View {
var body : some View {
Text("This is some Text that I have entered. \n Second line increase Height.")
.border(Color.red, width: 2)
}
}
S
S
u
u
r
r
r
r
o
o
u
u
n
n
d
d
w
w
i
i
t
t
h
h
F
F
r
r
a
a
m
m
e
e
To position Text View where we want it we can apply .frame(maxWidth: .infinity, maxHeight: .infinity) Modifier.
This will create a new Frame View around the Text View as its Child.
The code tells the Frame View to take maximum amount of space in both directions ignoring Safe Area.
struct ContentView: View {
var body: some View {
Text("This is some Text that I have entered.").border(Color.red, width: 2)
.frame(maxWidth: .infinity, maxHeight: .infinity).border(Color.blue, width: 2)
.edgesIgnoringSafeArea(.all)
}
}
Inside Safe Area Outside the Safe Are
A
A
l
l
i
i
g
g
n
n
m
m
e
e
n
n
t
t
i
i
n
n
s
s
i
i
d
d
e
e
F
F
r
r
a
a
m
m
e
e
With maximized Frame we can now define alignment of the Child Text View.
Applying .frame creates new View with specified dimensions with Text View inside it as its child.
Applying .border creates new View with Frame View as its child and blue border around it.
struct ContentView: View {
var body: some View {
Text("Some Text.").border(Color.red, width: 2)
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
.border(Color.blue, width: 2)
}
}
.bottom
